import { NavLink, Route, Switch } from 'react-router-dom'
import { titledPlaceHolder } from './PlaceHolder'
import HookUseStateDemo from './views/HookUseStateDemo'
import RoutesPropsDemo from './views/RoutesPropsDemo'
import Practice from './views/Practice'
import HookUseEffectDemo from './views/HookUseEffectDemo.jsx'

const routes = [
  {
    path: '/',
    text: '首页',
    exact: true,
    component: titledPlaceHolder('首页', 'black'),
  },
  {
    path: '/about',
    text: '关于我们',
    component: titledPlaceHolder('关于我们', 'purple'),
  },
  {
    path:'/useEffect-demo',
    text:'useEffect',
    component: HookUseEffectDemo
  },
  {
    path:'/HooksUseStatePractice',
    text:'useState练习',
    component: Practice
  },
  {
    path: '/useState-demo',
    text: 'useState',
    component:HookUseStateDemo
  },
  {
    path: '/routes-props-demo',
    text: '路由的属性',
    component: RoutesPropsDemo
  },
  {
    path: '/works',
    text: '我的作品',
    component: titledPlaceHolder('我的作品', 'red'),
    subRoutes: [
      {
        path: '/hacknews',
        text: '黑客新闻',
        component: titledPlaceHolder('黑客新闻', 'black'),
      },
      {
        path: '/bill-gates',
        text: '替首富花钱',
        component: titledPlaceHolder('替首富花钱', 'black'),
      },
    ],
  },
]

export default routes

export const makeRoutes = (routes, parentPath = '') => {
  // return <Switch>{
  return routes.map(({ component: View, subRoutes, path, ...route }) => {
    return (
      <Route key={route.path} path={parentPath + path} {...route}>
        <Switch>
          {subRoutes && makeRoutes(subRoutes, parentPath + path)}
          <Route path={parentPath + path}>
            <View />
          </Route>
        </Switch>
      </Route>
    )
  })
  // }</Switch>
}

export const makeNavLinks = (routes, parentPath = '') => {
  return (
    <ul>
      {routes.map(({ text, path, subRoutes }) => {
        const currentPath = parentPath + path
        return (
          <li key={currentPath}>
            <NavLink to={currentPath} exact>
              {text}
            </NavLink>
            {subRoutes && makeNavLinks(subRoutes, currentPath)}
          </li>
        )
      })}
    </ul>
  )
}